{extend name="common@base/common" /}

{block name="style"}
<link href="__CSS__/main.min.css" rel="stylesheet" type="text/css"/>
{/block}

{block name="body"}
<div class="header text-center">
  <img src="__IMG__/120x120icon.png" />
  <h3>Muu 前端引入ZUI框架</h3>
  <p>一个基于 Bootstrap 深度定制开源前端实践方案，帮助你快速构建现代跨屏应用。</p>
</div>

<div class="container">
  <ol class="breadcrumb">
      <li><a href="{:url('index')}">演示首页</a></li> 
  </ol>
  <section id="grid" class="demo-section">
    <h3>DEMO前台演示</h3> 
    <hr />
    <div class="row">
      <div class="col col-md-3 col-sm-6">
        <div class="chapter" id="chapter-control" data-id="control" data-accent="green">
          <div class="chapter-heading fade scale show in">
            <h4><i class="icon icon-check-empty"></i> <span class="name">控件</span></h4>
          </div>
          <div class="chapter-body" id="sections-control">
            <div class="card section fade scale slide-in-up-100 slide-in-right-50 show in" id="section-control-icon" data-id="icon" data-chapter="control" data-order="16" data-accent="green" data-target="page">
              <div class="card-heading" title="使用和查找图标">
                <i class="icon icon-star"></i>
                <h5><a class="name" href="{:url('control/icon')}">图标</a></h5>
              </div>
            </div>
            <div class="card section fade scale slide-in-up-100 slide-in-right-50 show in" id="section-control-button" data-id="button" data-chapter="control" data-order="17" data-accent="green" data-target="page">
              <div class="card-heading" title="按钮和按钮组">
                <i class="icon icon-bold"></i>
                <h5><a class="name" href="{:url('control/button')}">按钮</a></h5>
              </div>
            </div>
            <div class="card section fade scale slide-in-up-100 slide-in-right-50 show in" id="section-control-progressbar" data-id="progressbar" data-chapter="control" data-order="18" data-accent="green" data-target="page">
              <div class="card-heading" title="使用进度条">
                <i class="icon text-icon">%</i>
                <h5><a class="name" href="{:url('control/progressbar')}">进度条</a></h5>
              </div>
            </div>
            <div class="card section fade scale slide-in-up-100 slide-in-right-50 show in" id="section-control-loading" data-id="loading" data-chapter="control" data-order="19" data-accent="green" data-target="page">
              <div class="card-heading" title="用于在已有控件上提供正在加载中的样式。">
                <i class="icon icon-spinner"></i>
                <h5><a class="name" href="{:url('control/loading')}">加载指示器</a></h5>
              </div>
            </div>
            <div class="card section fade scale slide-in-up-100 slide-in-right-50 show in" id="section-control-label" data-id="label" data-chapter="control" data-order="20" data-accent="green" data-target="page">
              <div class="card-heading" title="使用标签">
                <i class="icon icon-tags"></i>
                <h5><a class="name" href="{:url('control/label')}">标签</a></h5>
              </div>
            </div>
            <div class="card section fade scale slide-in-up-100 slide-in-right-50 show in" id="section-control-textbox" data-id="textbox" data-chapter="control" data-order="21" data-accent="green" data-target="page">
              <div class="card-heading" title="包括输入框和下拉列表">
                <i class="icon icon-minus"></i>
                <h5><a class="name" href="{:url('control/textbox')}">表单控件</a></h5>
              </div>
            </div>
            <div class="card section fade scale slide-in-up-100 slide-in-right-50 show in" id="section-control-checkbox" data-id="checkbox" data-chapter="control" data-order="22" data-accent="green" data-target="page">
              <div class="card-heading" title="内联或块级的多选和单选框">
                <i class="icon icon-check-sign"></i>
                <h5><a class="name" href="{:url('control/checkbox')}">多选和单选框</a></h5>
              </div>
            </div>
            <div class="card section fade scale slide-in-up-100 slide-in-right-50 show in" id="section-control-switch" data-id="switch" data-chapter="control" data-order="23" data-accent="green" data-target="page">
              <div class="card-heading" title="使用复选框实现的开关控件">
                <i class="icon icon-toggle-on"></i>
                <h5><a class="name" href="{:url('control/switch')}">开关</a></h5>
              </div>
            </div>
            <div class="card section fade scale slide-in-up-100 slide-in-right-50 show in" id="section-control-breadcrumb" data-id="breadcrumb" data-chapter="control" data-order="24" data-accent="green" data-target="page">
              <div class="card-heading" title="面包屑导航">
                <i class="icon icon-map-marker"></i>
                <h5><a class="name" href="{:url('control/breadcrumb')}">面包屑</a></h5>
              </div>
            </div>
            <div class="card section fade scale slide-in-up-100 slide-in-right-50 show in" id="section-control-image" data-id="image" data-chapter="control" data-order="25" data-accent="green" data-target="page">
              <div class="card-heading" title="为图片应用样式">
                <i class="icon icon-picture"></i>
                <h5><a class="name" href="{:url('control/image')}">图片</a></h5>
              </div>
            </div>
            <div class="card section fade scale slide-in-up-100 slide-in-right-50 show in" id="section-control-header" data-id="header" data-chapter="control" data-order="26" data-accent="green" data-target="page">
              <div class="card-heading" title="标题">
                <i class="icon text-icon">H1</i>
                <h5><a class="name" href="{:url('control/header')}">多级标题</a></h5>
              </div>
            </div>
            <div class="card section fade scale slide-in-up-100 slide-in-right-50 show in" id="section-control-divider" data-id="divider" data-chapter="control" data-order="27" data-accent="green" data-target="page">
              <div class="card-heading" title="水平分隔线">
                <i class="icon text-icon">—</i>
                <h5><a class="name" href="{:url('control/divider')}">分隔线</a></h5>
              </div>
            </div>
            <div class="card section fade scale slide-in-up-100 slide-in-right-50 show in" id="section-control-scrollbar" data-id="scrollbar" data-chapter="control" data-order="28" data-accent="green" data-target="page">
              <div class="card-heading" title="美化浏览器滚动条">
                <i class="icon icon-resize-v"></i>
                <h5><a class="name" href="{:url('control/scrollbar')}">滚动条</a></h5>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="col col-md-3 col-sm-6">
        <div class="chapter" id="chapter-component" data-id="component" data-accent="red">
          <div class="chapter-heading fade scale show in">
            <h4><i class="icon icon-columns"></i> <span class="name">组件</span></h4>
          </div>
          <div class="chapter-body" id="sections-component">
            <div class="card section fade scale slide-in-up-100 slide-in-right-50 show in" id="section-component-inputcontrol" data-id="inputcontrol" data-chapter="component" data-order="29" data-accent="red" data-target="page">
              <div class="card-heading" title="带图标或标签的输入框">
                <i class="icon icon-pencil"></i>
                <h5><a class="name" href="{:url('component/inputcontrol')}">输入框</a></h5>
              </div>
            </div>
            <div class="card section fade scale slide-in-up-100 slide-in-right-50 show in" id="section-component-alert" data-id="alert" data-chapter="component" data-order="30" data-accent="red" data-target="page">
              <div class="card-heading" title="使用消息框引起用户注意">
                <i class="icon icon-warning-sign"></i>
                <h5><a class="name" href="{:url('component/alert')}">消息框</a></h5>
              </div>
            </div>
            <div class="card section fade scale slide-in-up-100 slide-in-right-50 show in" id="section-component-code" data-id="code" data-chapter="component" data-order="31" data-accent="red" data-target="page">
              <div class="card-heading" title="展示美丽的代码">
                <i class="icon icon-code"></i>
                <h5><a class="name" href="{:url('component/code')}">代码</a></h5>
              </div>
            </div>
            <div class="card section fade scale slide-in-up-100 slide-in-right-50 show in" id="section-component-inputgroup" data-id="inputgroup" data-chapter="component" data-order="32" data-accent="red" data-target="page">
              <div class="card-heading" title="多个输入单元格">
                <i class="icon icon-layout"></i>
                <h5><a class="name" href="{:url('component/inputgroup')}">输入组</a></h5>
              </div>
            </div>
            <div class="card section fade scale slide-in-up-100 slide-in-right-50 show in" id="section-component-listgroup" data-id="listgroup" data-chapter="component" data-order="33" data-accent="red" data-target="page">
              <div class="card-heading" title="垂直的可点击列表">
                <i class="icon icon-reorder"></i>
                <h5><a class="name" href="{:url('component/listgroup')}">列表组</a></h5>
              </div>
            </div>
            <div class="card section fade scale slide-in-up-100 slide-in-right-50 show in" id="section-component-nav" data-id="nav" data-chapter="component" data-order="34" data-accent="red" data-target="page">
              <div class="card-heading" title="多种样式的导航菜单">
                <i class="icon icon-anchor"></i>
                <h5><a class="name" href="{:url('component/nav')}">导航</a></h5>
              </div>
            </div>
            <div class="card section fade scale slide-in-up-100 slide-in-right-50 show in" id="section-component-navbar" data-id="navbar" data-chapter="component" data-order="35" data-accent="red" data-target="page">
              <div class="card-heading" title="应用导航条">
                <i class="icon icon-compass"></i>
                <h5><a class="name" href="{:url('component/navbar')}">导航条</a></h5>
              </div>
            </div>
            <div class="card section fade scale slide-in-up-100 slide-in-right-50 show in" id="section-component-menu" data-id="menu" data-chapter="component" data-order="36" data-accent="red" data-target="page">
              <div class="card-heading" title="垂直方向的导航菜单">
                <i class="icon icon-list-ul"></i>
                <h5><a class="name" href="{:url('component/menu')}">垂直菜单</a></h5>
              </div>
            </div>
            <div class="card section fade scale slide-in-up-100 slide-in-right-50 show in" id="section-component-pager" data-id="pager" data-chapter="component" data-order="37" data-accent="red" data-target="page">
              <div class="card-heading" title="为内容分页">
                <i class="icon text-icon">123</i>
                <h5><a class="name" href="{:url('component/pager')}">分页条</a></h5>
              </div>
            </div>
            <div class="card section fade scale slide-in-up-100 slide-in-right-50 show in" id="section-component-panel" data-id="panel" data-chapter="component" data-order="38" data-accent="red" data-target="page">
              <div class="card-heading" title="包含头部和脚部的面板">
                <i class="icon icon-list-alt"></i>
                <h5><a class="name" href="{:url('component/panel')}">面板</a></h5>
              </div>
            </div>
            <div class="card section fade scale slide-in-up-100 slide-in-right-50 show in" id="section-component-table" data-id="table" data-chapter="component" data-order="39" data-accent="red" data-target="page">
              <div class="card-heading" title="美观实用的表格">
                <i class="icon icon-table"></i>
                <h5><a class="name" href="{:url('component/table')}">表格</a></h5>
              </div>
            </div>
            <div class="card section fade scale slide-in-up-100 slide-in-right-50 show in" id="section-component-buttongroup" data-id="buttongroup" data-chapter="component" data-order="40" data-accent="red" data-target="page">
              <div class="card-heading" title="多个按钮组合形式">
                <i class="icon icon-th-list"></i>
                <h5><a class="name" href="{:url('component/buttongroup')}">按钮组</a></h5>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="col col-md-d5 col-sm-6">
        <div class="chapter" id="chapter-javascript" data-accent="brown">
          <div class="chapter-heading fade scale show in">
            <h4><i class="icon icon-magic"></i> <span class="name">JS插件</span></h4>
          </div>
          <div class="chapter-body" id="sections-javascript">
            <div class="card section fade scale slide-in-up-100 slide-in-right-50 show in" id="section-javascript-searchbox" data-id="searchbox" data-chapter="javascript" data-order="41" data-accent="brown" data-target="page">
              <div class="card-heading" title="创建丰富交互操作的搜索框">
                <i class="icon icon-search"></i>
                <h5><a class="name" href="{:url('javascript/searchbox')}">搜索框</a></h5>
              </div>
            </div>

            <div class="card section fade scale slide-in-up-100 slide-in-right-50 show in" id="section-javascript-contextmenu" data-id="contextmenu" data-chapter="javascript" data-order="42" data-accent="brown" data-target="page">
              <div class="card-heading" title="在鼠标位置弹出菜单（右键菜单）">
                <i class="icon icon-align-justify"></i>
                <h5><a class="name" href="{:url('javascript/contextmenu')}">上下文菜单</a></h5>
              </div>
            </div>

            <div class="card section fade scale slide-in-up-100 slide-in-right-50 show in" id="section-javascript-pagerjs" data-id="pagerjs" data-chapter="javascript" data-order="43" data-accent="brown" data-target="page">
              <div class="card-heading" title="自动创建的分页组件">
                <i class="icon text-icon">GO</i>
                <h5><a class="name" href="{:url('javascript/pagerjs')}">分页器</a></h5>
              </div>
            </div>

            <div class="card section fade scale slide-in-up-100 slide-in-right-50 show in" id="section-javascript-store" data-id="store" data-chapter="javascript" data-order="44" data-accent="brown" data-target="page">
              <div class="card-heading" title="使用浏览器本地存储读取数据">
                <i class="icon icon-hdd"></i>
                <h5><a class="name" href="{:url('javascript/store')}">本地存储</a></h5>
              </div>
            </div>

            <div class="card section fade scale slide-in-up-100 slide-in-right-50 show in" id="section-javascript-modal" data-id="modal" data-chapter="javascript" data-order="45" data-accent="brown" data-target="page">
              <div class="card-heading" title="浮动在页面之上的对话框">
                <i class="icon icon-check-empty"></i>
                <h5><a class="name" href="{:url('javascript/modal')}">对话框</a></h5>
              </div>
            </div>

            <div class="card section fade scale slide-in-up-100 slide-in-right-50 show in" id="section-javascript-modaltrigger" data-id="modaltrigger" data-chapter="javascript" data-order="46" data-accent="brown" data-target="page">
              <div class="card-heading" title="动态展示对话框">
                <i class="icon icon-signout"></i>
                <h5><a class="name" href="{:url('javascript/modaltrigger')}">对话框触发器</a></h5>
              </div>
            </div>

            <div class="card section fade scale slide-in-up-100 slide-in-right-50 show in" id="section-javascript-dropdown" data-id="dropdown" data-chapter="javascript" data-order="47" data-accent="brown" data-target="page">
              <div class="card-heading" title="浮动在页面之上的垂直菜单">
                <i class="icon icon-align-justify"></i>
                <h5><a class="name" href="{:url('javascript/dropdown')}">下拉菜单</a></h5>
              </div>
            </div>

            <div class="card section fade scale slide-in-up-100 slide-in-right-50 show in" id="section-javascript-tab" data-id="tab" data-chapter="javascript" data-order="48" data-accent="brown" data-target="page">
              <div class="card-heading" title="标签页式的导航菜单">
                <i class="icon icon-credit"></i>
                <h5><a class="name" href="{:url('javascript/tab')}">标签页</a></h5>
              </div>
            </div>

            <div class="card section fade scale slide-in-up-100 slide-in-right-50 show in" id="section-javascript-messager" data-id="messager" data-chapter="javascript" data-order="49" data-accent="brown" data-target="page">
              <div class="card-heading" title="漂浮在页面之上的无打断消息">
                <i class="icon icon-comment-alt"></i>
                <h5><a class="name" href="{:url('javascript/messager')}">漂浮消息</a></h5>
              </div>
            </div>

            <div class="card section fade scale slide-in-up-100 slide-in-right-50 show in" id="section-javascript-tooltip" data-id="tooltip" data-chapter="javascript" data-order="50" data-accent="brown" data-target="page">
              <div class="card-heading" title="为元素额外提供消息文本（工具提示）">
                <i class="icon icon-chat"></i>
                <h5><a class="name" href="{:url('javascript/tooltip')}">提示消息</a></h5>
              </div>
            </div>

            <div class="card section fade scale slide-in-up-100 slide-in-right-50 show in" id="section-javascript-popover" data-id="popover" data-chapter="javascript" data-order="51" data-accent="brown" data-target="page">
              <div class="card-heading" title="弹出交互式面板（提示面板）">
                <i class="icon icon-comment-line"></i>
                <h5><a class="name" href="{:url('javascript/popover')}">弹出面板</a></h5>
              </div>
            </div>

            <div class="card section fade scale slide-in-up-100 slide-in-right-50 show in" id="section-javascript-collapse" data-id="collapse" data-chapter="javascript" data-order="52" data-accent="brown" data-target="page">
              <div class="card-heading" title="为元素提供折叠和展开功能">
                <i class="icon icon-collapse"></i>
                <h5><a class="name" href="{:url('javascript/collapse')}">折叠</a></h5>
              </div>
            </div>

            <div class="card section fade scale slide-in-up-100 slide-in-right-50 show in" id="section-javascript-carousel" data-id="carousel" data-chapter="javascript" data-order="53" data-accent="brown" data-target="page">
              <div class="card-heading" title="定时自动切换的图片内存">
                <i class="icon icon-forward"></i>
                <h5><a class="name" href="{:url('javascript/carousel')}">轮播</a></h5>
              </div>
            </div>

            <div class="card section fade scale slide-in-up-100 slide-in-right-50 show in" id="section-javascript-datetimepicker" data-id="datetimepicker" data-chapter="javascript" data-order="54" data-accent="brown" data-target="page">
              <div class="card-heading" title="为文本框提供方便的日期时间选择功能">
                <i class="icon icon-calendar"></i>
                <h5><a class="name" href="{:url('javascript/datetimepicker')}">日期选择</a></h5>
              </div>
            </div>

            <div class="card section fade scale slide-in-up-100 slide-in-right-50 show in" id="section-javascript-chosen" data-id="chosen" data-chapter="javascript" data-order="55" data-accent="brown" data-target="page">
              <div class="card-heading" title="提供数据选择和筛选功能">
                <i class="icon icon-search"></i>
                <h5><a class="name" href="{:url('javascript/chosen')}">Chosen</a></h5>
              </div>
            </div>

            <div class="card section fade scale slide-in-up-100 slide-in-right-50 show in" id="section-javascript-htmleditor" data-id="htmleditor" data-chapter="javascript" data-order="56" data-accent="brown" data-target="page">
              <div class="card-heading" title="使用 Kineditor 或 UEditor 来编辑富文本">
                <i class="icon icon-edit"></i>
                <h5><a class="name" href="{:url('javascript/htmleditor')}">富文本编辑器</a></h5>
              </div>
            </div>

            <div class="card section fade scale slide-in-up-100 slide-in-right-50 show in" id="section-javascript-color" data-id="color" data-chapter="javascript" data-order="57" data-accent="brown" data-target="page">
              <div class="card-heading" title="色彩工具">
                <i class="icon icon-tint"></i>
                <h5><a class="name" href="{:url('javascript/color')}">Color</a></h5>
              </div>
            </div>

            <div class="card section fade scale slide-in-up-100 slide-in-right-50 show in" id="section-javascript-draggable" data-id="draggable" data-chapter="javascript" data-order="58" data-accent="brown" data-target="page">
              <div class="card-heading" title="拖动目标元素">
                <i class="icon icon-move"></i>
                <h5><a class="name" href="{:url('javascript/draggable')}">拖动</a></h5>
              </div>
            </div>

            <div class="card section fade scale slide-in-up-100 slide-in-right-50 show in" id="section-javascript-droppable" data-id="droppable" data-chapter="javascript" data-order="59" data-accent="brown" data-target="page">
              <div class="card-heading" title="拖动并放置在目标位置">
                <i class="icon icon-external-link"></i>
                <h5><a class="name" href="{:url('javascript/droppable')}">拖放</a></h5>
              </div>
            </div>

            <div class="card section fade scale slide-in-up-100 slide-in-right-50 show in" id="section-javascript-sortable" data-id="sortable" data-chapter="javascript" data-order="60" data-accent="brown" data-target="page">
              <div class="card-heading" title="拖动元素来排列顺序">
                <i class="icon icon-sort"></i>
                <h5><a class="name" href="{:url('javascript/sortable')}">拖放排序</a></h5>
              </div>
            </div>

            <div class="card section fade scale slide-in-up-100 slide-in-right-50 show in" id="section-javascript-selectable" data-id="selectable" data-chapter="javascript" data-order="61" data-accent="brown" data-target="page">
              <div class="card-heading" title="通过拖拽来选择元素">
                <i class="icon icon-th"></i>
                <h5><a class="name" href="{:url('javascript/selectable')}">拖拽选取</a></h5>
              </div>
            </div>

            <div class="card section fade scale slide-in-up-100 slide-in-right-50 show in" id="section-javascript-colorpicker" data-id="colorpicker" data-chapter="javascript" data-order="62" data-accent="brown" data-target="page">
              <div class="card-heading" title="从下拉菜单中选择预设的颜色值">
                <i class="icon icon-tint"></i>
                <h5><a class="name" href="{:url('javascript/colorpicker')}">颜色选择器</a></h5>
              </div>
            </div>

            <div class="card section fade scale slide-in-up-100 slide-in-right-50 without-topics show in" id="section-javascript-bootbox" data-id="bootbox" data-chapter="javascript" data-order="63" data-accent="brown" data-target="page">
              <div class="card-heading" title="警告、确认和内容编辑模态框（使用 Bootbox）">
                <i class="icon icon-question-sign"></i>
                <h5><a class="name" href="{:url('javascript/bootbox')}">模态对话框</a></h5>
              </div>
            </div>

            <div class="card section fade scale slide-in-up-100 slide-in-right-50 show in" id="section-javascript-imgcutter" data-id="imgcutter" data-chapter="javascript" data-order="64" data-accent="brown" data-target="page">
              <div class="card-heading" title="裁剪图片">
                <i class="icon icon-crop"></i>
                <h5><a class="name" href="{:url('javascript/imgcutter')}">图片剪切</a></h5>
              </div>
            </div>

            <div class="card section fade scale slide-in-up-100 slide-in-right-50 without-topics show in" id="section-javascript-scrollspy" data-id="scrollspy" data-chapter="javascript" data-order="65" data-accent="brown" data-target="page">
              <div class="card-heading" title="根据滚动条所处的位置来自动更新导航项">
                <i class="icon icon-link"></i>
                <h5><a class="name" href="{:url('javascript/scrollspy')}">滚动监听</a></h5>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="col col-md-d5 col-sm-6">
        <div class="chapter" id="chapter-view" data-id="view" data-accent="purple">
          <div class="chapter-heading fade scale show in">
            <h4><i class="icon icon-list-alt"></i> <span class="name">视图</span></h4>
          </div>
          <div class="chapter-body" id="sections-view">
            <div class="card section fade scale slide-in-up-100 slide-in-right-50 show in" id="section-view-datagrid" data-id="datagrid" data-chapter="view" data-order="66" data-accent="purple" data-target="page">
              <div class="card-heading" title="功能强大的数据网格视图">
                <i class="icon icon-table"></i>
                <h5><a class="name" href="{:url('view/datagrid')}">数据表格②</a></h5>
              </div>
            </div>

            <div class="card section fade scale slide-in-up-100 slide-in-right-50 show in" id="section-view-tabs" data-id="tabs" data-chapter="view" data-order="67" data-accent="purple" data-target="page">
              <div class="card-heading" title="灵活的标签页管理视图">
                <i class="icon icon-credit"></i>
                <h5><a class="name" href="{:url('view/tabs')}">标签页管理器</a></h5>
              </div>
            </div>

            <div class="card section fade scale slide-in-up-100 slide-in-right-50 show in" id="section-view-tree" data-id="tree" data-chapter="view" data-order="68" data-accent="purple" data-target="page">
              <div class="card-heading" title="体现层级关系的树形菜单">
                <i class="icon icon-th-list"></i>
                <h5><a class="name" href="{:url('view/tree')}">树形菜单</a></h5>
              </div>
            </div>

            <div class="card section fade scale slide-in-up-100 slide-in-right-50 show in" id="section-view-uploader" data-id="uploader" data-chapter="view" data-order="69" data-accent="purple" data-target="page">
              <div class="card-heading" title="提供文件管理和大文件批量上传功能。">
                <i class="icon icon-cloud-upload"></i>
                <h5><a class="name" href="{:url('view/uploader')}">文件上传</a></h5>
              </div>
            </div>

            <div class="card section fade scale slide-in-up-100 slide-in-right-50 show in" id="section-view-calendar" data-id="calendar" data-chapter="view" data-order="70" data-accent="purple" data-target="page">
              <div class="card-heading" title="在日历上展示有时间限定的内容">
                <i class="icon icon-calendar"></i>
                <h5><a class="name" href="{:url('view/calendar')}">日历</a></h5>
              </div>
            </div>

            <div class="card section fade scale slide-in-up-100 slide-in-right-50 show in" id="section-view-form" data-id="form" data-chapter="view" data-order="71" data-accent="purple" data-target="page">
              <div class="card-heading" title="用于用户提交数据的视图">
                <i class="icon icon-layout"></i>
                <h5><a class="name" href="{:url('view/form')}">表单</a></h5>
              </div>
            </div>

            <div class="card section fade scale slide-in-up-100 slide-in-right-50 show in" id="section-view-article" data-id="article" data-chapter="view" data-order="72" data-accent="purple" data-target="page">
              <div class="card-heading" title="用于展示带标题和其他额外信息的图文内容">
                <i class="icon icon-file-text-alt"></i>
                <h5><a class="name" href="{:url('view/article')}">文章</a></h5>
              </div>
            </div>

            <div class="card section fade scale slide-in-up-100 slide-in-right-50 show in" id="section-view-card" data-id="card" data-chapter="view" data-order="73" data-accent="purple" data-target="page">
              <div class="card-heading" title="可以展示图片和文本的卡片网格视图">
                <i class="icon icon-th"></i>
                <h5><a class="name" href="{:url('view/card')}">卡片</a></h5>
              </div>
            </div>

            <div class="card section fade scale slide-in-up-100 slide-in-right-50 show in" id="section-view-list" data-id="list" data-chapter="view" data-order="74" data-accent="purple" data-target="page">
              <div class="card-heading" title="包含图文内容的列表">
                <i class="icon icon-list"></i>
                <h5><a class="name" href="{:url('view/list')}">列表</a></h5>
              </div>
            </div>

            <div class="card section fade scale slide-in-up-100 slide-in-right-50 show in" id="section-view-comment" data-id="comment" data-chapter="view" data-order="75" data-accent="purple" data-target="page">
              <div class="card-heading" title="展示评论的列表视图">
                <i class="icon icon-comments"></i>
                <h5><a class="name" href="{:url('view/comment')}">评论</a></h5>
              </div>
            </div>

            <div class="card section fade scale slide-in-up-100 slide-in-right-50 show in" id="section-view-chart" data-id="chart" data-chapter="view" data-order="76" data-accent="purple" data-target="page">
              <div class="card-heading" title="展示曲线图和饼图">
                <i class="icon icon-bar-chart"></i>
                <h5><a class="name" href="{:url('view/chart')}">图表</a></h5>
              </div>
            </div>

            <div class="card section fade scale slide-in-up-100 slide-in-right-50 show in" id="section-view-treemap" data-id="treemap" data-chapter="view" data-order="77" data-accent="purple" data-target="page">
              <div class="card-heading">
                <i class="icon icon-sitemap"></i>
                <h5><a class="name" href="{:url('view/treemap')}">组织结构图</a></h5>
              </div>
            </div>

            <div class="card section fade scale slide-in-up-100 slide-in-right-50 show in" id="section-view-board" data-id="board" data-chapter="view" data-order="78" data-accent="purple" data-target="page">
              <div class="card-heading" title="在多个列进行拖放内容">
                <i class="icon icon-columns"></i>
                <h5><a class="name" href="{:url('view/board')}">看板</a></h5>
              </div>
            </div>

            <div class="card section fade scale slide-in-up-100 slide-in-right-50 show in" id="section-view-dashboard" data-id="dashboard" data-chapter="view" data-order="79" data-accent="purple" data-target="page">
              <div class="card-heading" title="支持拖放调整位置的面板网格">
                <i class="icon icon-th-large"></i>
                <h5><a class="name" href="{:url('view/dashboard')}">仪表盘</a></h5>
              </div>
            </div>

            <div class="card section fade scale slide-in-up-100 slide-in-right-50 show in" id="section-view-lightbox" data-id="lightbox" data-chapter="view" data-order="80" data-accent="purple" data-target="page">
              <div class="card-heading" title="灯箱式图片浏览 (Lightbox)">
                <i class="icon icon-carousel"></i>
                <h5><a class="name" href="{:url('view/lightbox')}">图片浏览</a></h5>
              </div>
            </div>

            <div class="card section fade scale slide-in-up-100 slide-in-right-50 show in" id="section-view-datatable" data-id="datatable" data-chapter="view" data-order="81" data-accent="purple" data-target="page">
              <div class="card-heading" title="可以固定列和表头的增强表格">
                <i class="icon icon-table"></i>
                <h5><a class="name" href="{:url('view/datatable')}">数据表格</a></h5>
              </div>
            </div>
          </div>
        </div>
      </div>

    </div>
  </section>
</div>
{/block}

{block name="script"}

{/block}